<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"  xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<meta charset="utf-8">
<head th:include="centre/manage/include :: header">
</head>
<link rel="stylesheet" type="text/css" href="/css/plugins/layui/layui.css"/>

<style>
/* input[type=email], input[type=url], input[type=search], input[type=tel],
	input[type=color], input[type=text], input[type=password], input[type=datetime],
	input[type=datetime-local], input[type=date], input[type=month], input[type=time],
	input[type=week], input[type=number], textarea {
	border-radius: 0 !important;
	color: #858585;
	background-color: #FFF;
	border: 1px solid #D5D5D5;
	padding: 5px 4px 6px;
	font-size: 14px;
	font-family: inherit;
	-webkit-box-shadow: none !important;
	box-shadow: none !important;
	-webkit-transition-duration: .1s;
	transition-duration: .1s;
} */

/* .table.table-bordered tr th, .table.table-bordered tr td {
	overflow: hidden;
	text-overflow: ellipsis;
} */
select {
    padding: 3px 4px;
    height: 30px;
}

.table{
	margin-bottom: 0px;
	table-layout: fixed;
}
</style>
<body class="gray-bg">
	<div class="wrapper wrapper-content">
		<div class="row">
			<div class="col-sm-12">
			<div class="panel panel-info">
				<div class="panel-heading">门店销量统计</div>
			    <div class="panel-body">
			        <div class="form-horizontal">
		             <div class="form-group" style="padding-left:60px;">
		              <div class="col-xs-12 col-sm-3 hidden-xs btn-sespan" >
						<div class="input-group">
							<span class="input-group-addon" style="height:30px;">
								付款时间
							</span>
							<input type="text" name="payStartTime" id="payStartTime" 
								value="2018-11-27 20:30:00" placeholder="点击选择开始时间" 
								readonly class="layui-input form-control"
								style="height:30px;"/>
							<span>
								<i class="fa fa-exchange"></i>
							</span>
							<input type="text"  name="payEndTime" id="payEndTime" 
								value="2018-11-28 20:00:00" placeholder="点击选择结束时间" 
								readonly class="layui-input form-control"
								style="height:30px;"/>
	 					
						</div>
					 </div>
					 <div class="col-xs-12 col-sm-3 hidden-xs btn-sespan" >
						<div class="input-group">
							<span class="input-group-addon" style="height:30px;">
								开通时间
							</span>
							<input type="text" name="sStartTime" id="sStartTime" 
								value="" placeholder="点击选择开始时间" 
								readonly class="layui-input form-control"
								style="height:30px;"/>
							<span>
								<i class="fa fa-exchange"></i>
							</span>
							<input type="text"  name="sEndTime" id="sEndTime" 
								value="" placeholder="点击选择结束时间" 
								readonly class="layui-input form-control"
								style="height:30px;"/>
	 					
						</div>
					 </div>
					 <!-- <div class="col-xs-12 col-sm-2 hidden-xs btn-sespan" >
	                   <select class="form-control tpl-category-parent" id="pcate"
							name="pcate" onchange="renderCategoryThird(this)">
							<option value="0">请选择顶级分类</option>
							<option th:each="item: ${category}" th:text="${item.name}"
								th:value="${item.id}"></option>
								
						</select>
						<select class="form-control tpl-category-child" id="ccate"
							name="ccate">
							<option value="0">请选择下级分类</option>
						</select>
		             </div> -->
		             <div class="col-xs-12 col-sm-2 hidden-xs btn-sespan" data-toggle="distpicker" id="dist_target">
	                    <select class="form-control tpl-category-parent" id="province" name="province" data-province="----选择省----">
						</select>
						<select class="form-control tpl-category-child"  id="city" name="city" data-city="----选择市----">
						</select>
		             </div>
					 <div class="col-xs-12 col-sm-2 hidden-xs btn-sespan" >
	                   <div class="input-group">
	                   		<select class="form-control" id="column"
								name="column">
								<option value="">排序方式</option>
								<option value="sumPrice">按销售额</option>
								<option value="sumOrder">按销售量</option>
								<option value="1">按团员数量</option>
								<option value="sumProduct">按商品数量</option>
							</select>
						</div>
		             </div>
		             <!-- <div class="col-xs-12 col-sm-2 hidden-xs btn-sespan" >
	                   <select class="form-control tpl-category-parent">
							<option value="">请选择配送员</option>
						</select>
		             </div> -->
		             <input type="hidden" id="centreId" name="centreId" th:value="${centreId}" th:if="${flag} == '1'">
					 <div class="col-xs-12 col-sm-2 hidden-xs btn-sespan" th:if="${flag} == '0'">
						<select data-placeholder="商户" class="form-control chosen-select" id="centreId" name="centreId" tabindex="2">
							<option value="">选择商户</option>
							<option th:each="item: ${centreList}" th:text="${item.name}" th:value="${item.centreId}"></option>
						</select>
					 </div>
		            </div>
		            
		            <div class="form-group" style="padding-left:60px;">
		            	<div class="col-xs-12 col-sm-4 hidden-xs btn-sespan" >
							<input class="form-control" id="tzOrXqName" name="tzOrXqName" 
								placeholder="输入需查询的门店或门店名称" type="text" value="">
		             	</div>
		                <div class="col-sm-6 col-lg-9 col-xs-12">
		                    <button class="btn btn-default" onclick="reLoad()">
		                    	<i class="fa fa-search"></i> 搜索
		                    </button>
		                    <button id="modal_userid" onclick="exportExcel()"
		                    	class="btn btn-default" 
		                    	style='margin-left:10px;'>
								<span class="fa fa-download"></span>
								导出Excel
							</button>
		                </div>
		            </div>
			        </div>
			    </div>
			</div>
			
			<div class="panel panel-default">
    			<div class="panel-body" style="padding: 0;">
    				<table id="memberSaleTable" data-mobile-responsive="true">
					</table>
    			</div>
			</div>
		</div>
			
		</div>
		</div>
	<div th:include="centre/manage/include::footer"></div>
	<script type="text/javascript" src="/public/ace/js/ace-extra.js"></script>
	<script type="text/javascript" src="/js/plugins/layui/layui.js"></script>
	<script src="/js/plugins/distpicker/distpicker.data.min.js" ></script>
	<script src="/js/plugins/distpicker/distpicker.min.js" ></script>
	<script type="text/javascript">
		function closeDow() {
			var index = parent.layer.getFrameIndex(window.name); // 获取窗口索引
			parent.layer.close(index);
		}
		
		layui.use('laydate', function(){
			  var laydate = layui.laydate;
			  laydate.render({
			  	elem: '#sStartTime' , type: 'datetime'
			  });
			  
			  laydate.render({
			  	elem: '#sEndTime' , type: 'datetime'
			  });
			  
			  laydate.render({
				  	elem: '#payStartTime' , type: 'datetime'
				  });
			  laydate.render({
				  	elem: '#payEndTime' , type: 'datetime'
				  });
			  
			  
		})

		var prefix = "/report/manage";
		$(document).ready(function () {
			$("#province").val("");
			$("#city").val("");
			
			var date = new Date();
			var year = date.getFullYear();
			var mon=date.getMonth()+1 < 10 ? "0"+ (date.getMonth()+1+""):date.getMonth()+1;
			var da=date.getDate() < 10 ? "0"+ date.getDate():date.getDate();
			date.setDate(date.getDate() - 1);
			var startyear = date.getFullYear();
			var startmon=date.getMonth()+1 < 10 ? "0"+ (date.getMonth()+1+""):date.getMonth()+1;
			var startda=date.getDate() < 10 ? "0"+ date.getDate():date.getDate(); 
			$("#payStartTime").val(startyear+"-"+startmon+"-"+startda+" 20:30:00");
			$("#payEndTime").val(year+"-"+mon+"-"+da+" 20:00:00");
			
		    load();
		    $(".fixed-table-footer table").removeClass("table");
		});
		function load() {
			$('#memberSaleTable').bootstrapTable({
				method : 'get', // 服务器数据的请求方式 get or post
				url : prefix + "/memberSale", // 服务器数据的加载地址
				showRefresh : true,
				// showToggle : true,
				iconSize : 'outline',
				// toolbar: '#exampleToolbar',
				striped : true, // 设置为true会有隔行变色效果
				dataType : "json", // 服务器返回的数据类型
				//pagination : true, // 设置为true会在底部显示分页条
				pageList : [ 10, 20, 50 ],
				// queryParamsType : "limit",
				// //设置为limit则会发送符合RESTFull格式的参数
				singleSelect : false, // 设置为true将禁止多选
				// contentType : "application/x-www-form-urlencoded",
				// //发送到服务器的数据编码类型
				pageSize : 10, // 如果设置了分页，每页数据条数
				pageNumber : 1, // 如果设置了分布，首页页码
				// search : true, // 是否显示搜索框
				//showColumns : true, // 是否显示内容下拉框（选择显示的列）
				showFooter : true,
				sidePagination : "server", // 设置在哪里进行分页，可选值为"client" 或者
				// "server"
				queryParams : function(params) {
					return {
						limit : 1,
						offset : 1 ,
						payStartTime: $.trim($("#payStartTime").val()),
						payEndTime: $.trim($("#payEndTime").val()),
						startDate: $.trim($("#sStartTime").val()),
                        endDate: $.trim($("#sEndTime").val()),
                        province: $.trim($("#province").val()),
                        city: $.trim($("#city").val()),
                        column: $.trim($("#column").val()),
                        tzOrXqName:$.trim($("#tzOrXqName").val()),
                        centreId:$.trim($("#centreId").val())
					};
				},
				columns: [
				/* {
				    title: '序号',
				    field: 'id'
				}, */
                {
                    title: '门店姓名',
                    field: 'realname', 
				    footerFormatter : function(value, index) {
                    	return "总计" + $('#memberSaleTable').bootstrapTable('getOptions').totalRows + "个门店";
                    }
                },
				{
					title: '门店电话',
					field: 'mobile'
				},
                {
                    title: '开通时间',
                    field: 'sTime',
                    formatter : function(value,row, index) {
                        if(value.length>0){
                            value=value.substring(0,10);
						}
                        return value;
                    },
                },{
                    title: '门店名称',
                    field: 'tXiaoquName',
                },{
                    title: '会员数量',
                    field: 'peopleNumber',
                    footerFormatter : function(value) {
                    	var count = 0;
				    	for (var i=0;i<value.length;i++){
				    		count += value[i].peopleNumber;
				    	}
                    	return "会员总数:" + count;
                    }
                },{
                    title: '订单数量',
                    field: 'sumOrder',
                    footerFormatter : function(value) {
                    	var count = 0;
				    	for (var i=0;i<value.length;i++){
				    		count += value[i].sumOrder
				    	}
                    	return "订单单品总量：" + count;
                    }
                },{
                    title: '所占比例',
                    field: 'orderRate',
                    formatter: function (value, row, index) {
                    	return '<div class="progress">' +
                    	         '<div class="progress-bar" role="progressbar" aria-valuenow="60"  aria-valuemin="0" aria-valuemax="100" style="width: ' + value + '%;">' +
                                    '<span><font color="#000000">' + value + '%</font></span>' + 
                                 '</div>' + 
                               '</div>';
                    }
                },{
                    title: '商品数量',
                    field: 'sumProduct',
                    footerFormatter : function(value) {
                    	var count = 0;
				    	for (var i=0;i<value.length;i++){
				    		count += value[i].sumProduct
				    	}
                    	return "商品交易总量：" + count;
                    }
                },{
                    title: '所占比例',
                    field: 'productRate',
                    formatter: function (value, row, index) {
                    	return '<div class="progress">' +
                    	         '<div class="progress-bar" role="progressbar" aria-valuenow="60"  aria-valuemin="0" aria-valuemax="100" style="width: ' + value + '%;">' +
                                    '<span><font color="#000000">' + value + '%</font></span>' + 
                                 '</div>' + 
                               '</div>';
                    }
                },{
                    title: '交易额',
                    field: 'sumPrice',
                    footerFormatter : function(value) {
                    	var count = 0;
				    	for (var i=0;i<value.length;i++){
				    		count += value[i].sumPrice * 100;
				    	}
                    	return "交易总额：￥" + count/100;
                    }
                },{
                    title: '所占比例',
                    field: 'priceRate',
                    align: 'centre',
                    valign: 'middle',
                    formatter: function (value, row, index) {
                    	return '<div class="progress">' +
                    	         '<div class="progress-bar" role="progressbar" aria-valuenow="60"  aria-valuemin="0" aria-valuemax="100" style="width: ' + value + '%;">' +
                                    '<span><font color="#000000">' + value + '%</font></span>' + 
                                 '</div>' + 
                               '</div>';
                    }
                }]
			});
		}
		function reLoad() {
			$('#memberSaleTable').bootstrapTable('refresh');
		}
		
		function renderCategoryThird(obj) {
			var index = obj.options[obj.selectedIndex].value;
			var html = "<option>请选择下级分类</option>";
			if (index == 0) {
				$("#ccate").html(html);
			}else {
				$.ajax({
					url: "/category/manage/getChildByPar",
					data:{"id":index},
					dataType: "json",
					success: function(data){
						for(var i=0; i< data.length; i++){
							html += '<option value="'+data[i].id+'">'+data[i].name+'</option>';
						}
						$("#ccate").html(html);
					}
				})
			}
		}
		
		function exportExcel() {
			var payStartTime = $.trim($("#payStartTime").val());
			var payEndTime = $.trim($("#payEndTime").val());
			var startDate = $.trim($("#sStartTime").val());
			var endDate = $.trim($("#sEndTime").val());
			var province = $.trim($("#province").val());
			var city = $.trim($("#city").val());
			var column = $.trim($("#column").val());
			var tzOrXqName =$.trim($("#tzOrXqName").val());
			var centreId =$.trim($("#centreId").val());
		    window.location.href = prefix + "/exportMemberSale?payStartTime=" + payStartTime + 
		    		"&payEndTime=" + payEndTime +"&startDate=" + startDate +"&endDate=" + endDate +
		    		"&province=" + province +"&city=" + city +"&column=" + column + 
		    		"&tzOrXqName=" + tzOrXqName + "&centreId=" + centreId;
		}
	</script>
	
</body>
</html>
